<template>
    <div class="fillcontain">
        <div class="">
            <el-form :model="formData" inline="true" ref="formData"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-select class="input-buttion" size="mini" v-model="formData.schoolid"
                                       placeholder="性别">
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="">
                            <el-input
                                class="input-buttion"
                                size="mini"
                                placeholder="姓名/手机号/身份证"
                                prefix-icon="el-icon-search"
                                v-model="formData.name">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="primary" style="margin-left: 20px" size="mini" @click="initData" icon="el-icon-search">搜索
            </el-button>
        </div>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                    property="name"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="mobile"
                    label="手机"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="sex"
                    label="性别"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="cardno"
                    label="身份证"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="备注"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="updateEmp(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteEmp(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.formData.pageno"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {queryEmployee, deleteEmployee} from '@/api/getData'

    export default {
        data() {
            return {
                formData: {
                    schoolid: '',
                    status: '',
                    duty: '',
                    name: '',
                    pageno: 1,
                    pagesize: 10,

                },
                tableData: [],
                count: 0,
            }
        },
        components: {
            headTop,
        },
        created() {
            this.initData();
        },
        mounted() {
            if (this.periodList == null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },

        computed: {
            ...
                mapGetters(['schoolList', 'dutyList', 'workStatusList'])
        },
        methods: {
            async initData() {
                this.tableData = [];
                const tableData = {'name':'测试','sex':'男','mobile':'1311111','cardno':'11111','comments':'测试'};

                this.tableData.push(tableData);

                /* //alert(JSON.stringify(this.formData));
                 const v = await queryEmployee({
                     "data": this.formData
                 });
                 this.tableData = [];
                 var list = v.data.values;
                 this.count = v.data.totalCount;
                 list.forEach(item => {
                     const tableData = {};
                     tableData.name = item.name;
                     tableData.sex = item.sex;
                     tableData.mobile = item.mobile;
                     tableData.cardno = item.cardno;
                     tableData.comments = item.comments;
                     this.tableData.push(tableData);
                 })*/
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.formData.pageno = val;
                this.initData();
            },

            async updateEmp(a,row){
                this.$router.push({path: '/addEmployee', query: {id: row.id}});
            },

            async deleteEmp(a, row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.confirmdelete(row);
                });
            },
            async confirmdelete(row) {
                var data = {"data": {"id": row.id}}
                await deleteEmployee(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },

        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
